<template>
	<div class="san">
		<div class="dd">
			<el-form-item label="项目名称" prop="ProjectName">
				<el-input disabled v-model="Project.ProjectName" />
			</el-form-item>
		</div>

		<div class="dd" >
			<el-form-item label="订单编号" prop="OrdersId" >
				<el-input disabled v-model="Project.OrdersId" />
			</el-form-item>
		</div>

		<div class="dd">
			<el-form-item label="订单名称" prop="OrdersName">
				<el-input disabled v-model="Project.Orders.OrdersName" />
			</el-form-item>
		</div>
	</div>
	<hr>
	<div class="ss">
		<div class="ds">
			<el-form-item label="客户编号" prop="Id">
				<el-input disabled v-model="ClientInfo.Id" />
			</el-form-item>
		</div>

		<div class="ds">
			<el-form-item label="客户名称" prop="ClientName">
				<el-input disabled v-model="ClientInfo.ClientName" />
			</el-form-item>
		</div>

		<div class="ds">
			<el-form-item label="联系人" prop="Contact" style="">
				<el-input disabled v-model="ClientInfo.Contact" />
			</el-form-item>
		</div>

		<div class="ds">
		
			<el-form-item label="电话" prop="Phone">
				<el-input disabled v-model="ClientInfo.Phone" />
			</el-form-item>
		</div>

		<div class="ds">
		
			<el-form-item label="地址" prop="Address" >
				<el-input disabled v-model="ClientInfo.Address" />
			</el-form-item>
		</div>
		<div class="ds"></div>
	</div>
	<hr />

	<ElTable ref="addfilm" :data="Project.TaskInfos" emptyText="暂无数据" height="30vh">
		<el-table-column type="selection" width="55" />
		<ElTableColumn prop="Id" label="ID" width="80"></ElTableColumn>
		<ElTableColumn prop="TaskName" label="任务内容" width="110px">
		</ElTableColumn>
		<ElTableColumn prop="UserId" label="负责人" width="240px">
			<template #default="scope">
				<el-select v-model="scope.row.UserId" filterable placeholder="选择负责人" style="width: 200px;">
					<el-option v-for="item in User" :key="item.Id" :label="item.UserName" :value="item.Id" />
				</el-select>
			</template>
		</ElTableColumn>
		<ElTableColumn prop="BeginTime" label="开始时间" width="250px">
			<template #default="scope">
				<el-date-picker v-model="scope.row.BeginTime" type="date" placeholder="请选择开始时间" />
			</template>

		</ElTableColumn>
		<ElTableColumn prop="EndTime" label="结束时间" width="250">
			<template #default="scope">
				<el-date-picker v-model="scope.row.EndTime" type="date" placeholder="请选择结束时间" />
			</template>
		</ElTableColumn>
		<ElTableColumn prop="Precautions" label="注意事项" width="240px">
			<template #default="scope">
				<el-input v-model="scope.row.Precautions" type="text" />
			</template>

		</ElTableColumn>

	</ElTable>

	<el-form-item>	
		<div style="width: 100%; height: 40px;">
		    <ElButton type="primary" style="position:absolute; bottom: 2px;right: 10px;" @click="submitForm">保存
		    </ElButton>
		</div>
	</el-form-item>

</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import type { ComponentSize, FormInstance, FormRules, ElTable } from 'element-plus'
	import { ElNotification,ElMessage} from 'element-plus'
	import userapi from "@/api/userapi"
	import projectapi from "@/api/projectapi"
	import taskapi from "@/api/taskapi"
	import { number } from 'echarts/types/src/echarts.all.js';

	const emit = defineEmits(['Close'])
	const TimePick = ref()
	

	const props = defineProps({
		Id: Number
	})
	//负责人
	const User = ref([])

	//客户信息
	const ClientInfo = ref({
		Id: "",
		ClientName: "",
		Contact: "",
		Phone: "",
		Address: "",
	});
	//项目信息
	const Project = ref({
		Id: "",
		ProjectName: "",
		OrdersId: 0,
		CreateTime: "",
		Status: "",
		ProjectDesc: '',
		Budget: '',
		TaskInfos: [],
		MangerId: 0,
		ClientId: 0,
		Orders: {
			OrdersName: "",
		}
	})

	const submitForm = () => {
		console.log(Project.value)
		projectapi.update(Project.value).then(res => {
			if (res.code > 0) {
				ElMessage.success("分配完成")
				emit("Close", "assign")
			}
		}).catch(err => {
			console.log(err)
		})
		console.log(Project.value)
	}

	//查询项目信息
	const getdata = () => {
		projectapi.getall({ id: props.Id }).then(res => {
			Project.value = res.data.data;
			ClientInfo.value = res.data.client

			getmanger()
		}).catch(err => {
			console.log(err)
		})
	}

	//查询负责人
	const getmanger = () => {
		userapi.Getshi().then(res => {
			User.value = res.data;
		}).catch(err => {
			console.log(err)
		})
	}
	onMounted(() => {
		getmanger();
		getdata();
	})
</script>

<style scoped>
	.dd {
		width: 300px;

	}

	.ds {
		margin-top: 20px;
		
	}
	.san{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.ss {
		
		display: flex;
		justify-content:space-between;
		/* flex-wrap: wrap; */
		
	}
	
</style>